<template>
  <div class="total">
      <ul  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="30">
        <li v-for="(item,index) in list">
            <div>{{index + 1}}</div>
            <div><img :src="item.image"></div>
            <div>
              <h4>{{item.name}}</h4>
              <p :style="{background:item.labelList.color}" >{{item.labelList.name}}</p>
              <p>{{item.description}}</p>
            </div>
            <a href="javascript:;">开始</a>
        </li>
        <mt-spinner v-if="flag" color="#26a2ff" :size="35" type="triple-bounce"></mt-spinner> 
      </ul>
  </div> 
</template>

<script>
export default {
  name: 'total',
  data () {
    return {
      flag:true,
      list:[
          {"id":"781","name":"世界Online","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160923124142_607.png","description":"这世界，很精彩！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"780","name":"魁拔","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160908173054_820.png","description":"神秘的元泱界","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"779","name":"武林艳史","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160908171254_317.png","description":"决出天下第一","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"776","name":"降魔西游","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160908144340_943.png","description":"成就降魔西游之路！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"774","name":"破坏神","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160828153922_872.png","description":"三国策略挂机养成游戏","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"战争策略","color":"#60D6FF"}},
          {"id":"772","name":"烽游三国","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160825173012_126.png","description":"调兵遣将，征占八方一统三国。","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"战争策略","color":"#60D6FF"}},
          {"id":"771","name":"大主宰","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160825172718_555.jpg","description":"全自动挂机战斗RPG卡牌游戏","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"769","name":"皇城传奇","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160825171205_226.png","description":"爽翻天！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"挂机放置","color":"#DA92E9"}},
          {"id":"767","name":"萌神赵子龙","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160812162525_155.png","description":"一统江山","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"其他游戏","color":"#FBAD6F"}},
          {"id":"766","name":"我要上头条","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160811163515_699.png","description":"玩钱了","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"模拟经营","color":"#FBAD6F"}}
          ],
         list2:[
          {"id":"765","name":"热血球球","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160810161133_678.png","description":"只为冠军而战，登上欧冠巅峰。","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"体育竞技","color":"#FF8C3E"}},
          {"id":"764","name":"乱弹三国","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160914174138_881.png","description":"讲述三国传奇。","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"763","name":"暴走主公","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160810162636_456.png","description":"快来狂扁邪恶的BOSS们","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"挂机放置","color":"#DA92E9"}},
          {"id":"762","name":"商业传奇","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160810151833_599.jpg","description":"书写一段属于你的商业传奇","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"模拟经营","color":"#FBAD6F"}},
          {"id":"761","name":"芈月传","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160810163243_693.jpg","description":"帮助芈月成为中国第一位母仪天下的太后！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"759","name":"群p英雄","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160810121545_138.png","description":"争夺世界的霸主之位！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"挂机放置","color":"#DA92E9"}},
          {"id":"758","name":"口袋妖怪H5","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160805172526_791.png","description":"皮卡丘, GO!","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"756","name":"口袋妖怪联盟","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160805171509_806.png","description":"卡牌回合制","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"754","name":"爬塔碰","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160803124742_699.png","description":"一段欢乐与泪水的魔幻之旅!","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"益智休闲","color":"#07C8A8"}},
          {"id":"753","name":"乱斗封神","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160802133445_766.png","description":"不一样的卡牌体验","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"731","name":"乱戳三国","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160518171057_826.png","description":"群将约架，一统三国。","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"挂机放置","color":"#DA92E9"}},
          {"id":"690","name":"海岛船奇","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160318162709_945.jpg","description":"体验出连击技的快感","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"其他游戏","color":"#FBAD6F"}},
          {"id":"684","name":"奇兵部落","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160309160056_721.png","description":"百万部落资源之争","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"战争策略","color":"#60D6FF"}},
          {"id":"682","name":"悟空快点","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160309152009_952.png","description":"保卫唐僧前往西天取经！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"挂机放置","color":"#DA92E9"}},
          {"id":"681","name":"全民穿越之宫","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160309151520_742.png","description":"体验不同身份的爱情故事来寻找自己的梦中人。","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"角色扮演","color":"#FF8C3E"}},
          {"id":"668","name":"猛将张飞","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160302145415_828.png","description":"三国霸业等你来开启！","screen":"横屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"策略塔防","color":"#FF8C3E"}},
          {"id":"667","name":"囧囧兔：大胃王","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160302145405_115.jpg","description":"想拥有一个独一无二的空间吗？","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"益智休闲","color":"#07C8A8"}},
          {"id":"666","name":"囧囧兔：搬运工","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160302144638_659.jpg","description":"赶紧加入搬运工的行列吧！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"益智休闲","color":"#07C8A8"}},
          {"id":"664","name":"囧囧兔：特困生","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160302142355_638.jpg","description":"一起来发泄吧！","screen":"横屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"益智休闲","color":"#07C8A8"}},
          {"id":"662","name":"星际农场","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160517142602_336.png","description":"为了保卫家园,英雄们踏上远征！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"战争策略","color":"#60D6FF"}}
         ] 
    }
  },
  methods:{
    loadMore() {
      if (this.loading) {
        this.flag = false;
        return false
      }
      this.loading = false;
      
      setTimeout(() => {
        
          this.list= this.list.concat(this.list2);
        
        this.loading = true;
        
      }, 2500);
    }
  },
  mounted(){
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .total{
    width: 100%;
  }
  ul{
    text-align: center;
  }
  ul,li{
    width: 100%;
  }
  li{
    box-sizing: border-box;
    padding-left: 0.1rem;
    display: flex;
    height: 0.75rem;
    align-items: center;
  }
  li div{
    height: 100%;
    display: flex;
  }
  li div:nth-of-type(1){
    text-align: center;
    line-height: 0.74rem;
    color: #555;
    width: 0.2rem;
  }
  li div:nth-of-type(2) img{
      height: 0.51rem;
      width: 0.51rem;
      justify-content: center;
      align-self: center;
  }
  li div:nth-of-type(3){
    display: flex;
    font-size: 12px;
    box-sizing: border-box;
    padding: 0.14rem;
    flex-direction: column;
    align-items: left;
    width: 1.8rem;
    justify-content: space-around;
    text-align: left;
  }
  li div:nth-of-type(3) p:first-of-type{
    color: #fff;
  }
  li div:nth-of-type(3) p:last-of-type{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  li a{
    display: block;
    width: 0.40rem;
    line-height: 0.2rem;
    border: 1px solid #ff2741;
    color: #ff2741;
    border-radius: 2px;
    height: 0.2rem;
    text-align: center;
  }
</style>
